<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="tableHeight"
      border
    >
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Table, TableColumn } from 'element-ui'

export default {
  components: {
    ElTable: Table,
    ElTableColumn: TableColumn,
  },
  data () {
    return {
      tableData: [
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Jane', age: 25, address: 'London' },
        { name: 'Bob', age: 35, address: 'Paris' },
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Jane', age: 25, address: 'London' },
        { name: 'Bob', age: 35, address: 'Paris' },
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Jane', age: 25, address: 'London' },
        { name: 'Bob', age: 35, address: 'Paris' },
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Jane', age: 25, address: 'London' },
        { name: 'Bob', age: 35, address: 'Paris' },
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Jane', age: 25, address: 'London' },
        { name: 'Bob', age: 35, address: 'Paris' },
        // More data...
      ],
      tableHeight: null,
    }
  },
  mounted () {
    this.calculateTableHeight()
    window.addEventListener('resize', this.calculateTableHeight)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.calculateTableHeight)
  },
  methods: {
    calculateTableHeight () {
      const container = document.querySelector('.table-container')
      if (container) {
        this.$nextTick(() => {
          const containerHeight = container.clientHeight
          const tableHeaderHeight = container.querySelector('.el-table__header-wrapper').clientHeight
          const tableFooterHeight = container.querySelector('.el-table__footer-wrapper').clientHeight
          const paginationHeight = container.querySelector('.el-pagination').clientHeight
          this.tableHeight = containerHeight - tableHeaderHeight - tableFooterHeight - paginationHeight
        })
      }
    },
  },
};
</script>

<style>
.table-container {
  overflow: auto;
  height: 200px;
}
</style>
